<template>
  <view class="find" :style="[background]">
    <view class="header-bar f-r a-c j-b">
      <u-image class="nv-logo" width="52rpx" height="52rpx" src="/static/home/logo_white.png"></u-image>
      <view class="logo-text f-w-b color-white xxl">发现</view>
    </view>
    <view class="tab-list f-r a-c j-c">
      <view
          @click="changeTab(item)"
          v-for="item in tabList" :class="['tab-item', item.id === activeTab ? 'active' : '']">
        {{ item.name }}
      </view>
    </view>
    <view class="search-box f-r a-c j-c">
      <image src="/static/find/search.png" style="width: 18px;height: 18px;margin-right: 12px"></image>
      <input type="text" v-model="keyword" placeholder="搜索文章内容或关键词">
    </view>
    <view style="margin: 40rpx 20rpx 0;">
      <ad-swipers
          :pid="33"
          radius="16rpx"
      >
      </ad-swipers>

      <view class="nav flex" v-if="activeTab == 2">
        <router-link
            v-for="item in menuList1"
            class="item"
            :to="{ path: item.path,  query: item.query }"
        >
          <view class="flex-col col-center m-b-20">
            <view class="icon-contain">
              <image
                  class="nav-icon"
                  :src="item.icon"
              ></image>
            </view>
            <view class="sm m-t-10">{{ item.name }}</view>
          </view>
        </router-link>
      </view>
      <u-tabs
          bg-color="transparent"
          :list="tabsList2"
          :is-scroll="true"
          :current="currentTab"
          :bold="true"
          :active-color="colorConfig.primary"
          @change="changeTab2" />
      </view>
      <div class="list">
        <view class="list-item" v-for="item in showList1" :key="item.id">
          <view style="border-radius: 16rpx;overflow:hidden;position:relative;">
            <u-image  width="100%" mode="widthFix" :src="item.image"></u-image>
            <view class="count-box f-r a-c">
              <u-image  width="17px" height="17px" mode="widthFix" src="/static/find/count.png"></u-image>
              <text class="color-white xxs">{{ item.visit || 0}}次</text>
            </view>
          </view>
          <view class="list-title">{{ item.title }}</view>
          <view class="share f-r a-c j-e">
            <image src="/static/find/share.png" style="width: 20px;height: 20px;margin-right: 10px"></image>
            <view class="xl" style="margin-left: 0px">分享</view>
          </view>
        </view>
      </div>
      <div class="list2">
        <u-row :gutter="24">
          <u-col :span="6" v-for="item in showList2" :key="item.id">
          <view class="list-item">
            <view style="border-radius: 16rpx;overflow:hidden;position:relative;">
              <view class="count-box f-r a-c">
                <u-image  width="17px" height="17px" mode="widthFix" src="/static/find/count.png"></u-image>
                <text class="color-white xxs">{{ item.visit || 0}}次</text>
              </view>
              <u-image  width="100%" height="300rpx" mode="aspectFit" :src="item.image"></u-image>
            </view>
            <view class="list-title">{{ item.title }}</view>
          </view>
        </u-col>
        </u-row>
      </div>
    <u-empty style="margin-top: 50px" v-if="list.length === 0"></u-empty>
            <tabbar></tabbar>
  </view>
</template>

<script>
import API_REQUEST from '@/api/api'
import MescrollCompMixin from '@/components/mescroll-uni/mixins/mescroll-comp'
import { mapGetters, mapActions } from 'vuex'
import { getMenu } from '@/api/store'
import { toLogin } from '@/utils/login'
import { menuJump, copy } from '@/utils/tools'
import Cache from '@/utils/cache'
const app = getApp()
export default {
  mixins: [MescrollCompMixin],
  data() {
    return {
      keyword: '',
      showNav: false,
      navBg: 0,
      activeTab: '0',
      tabList: [
        {
          id: '0',
          name: '展业库'
        },
        {
          id: '1',
          name: '英雄荟'
        },
        {
          id: '2',
          name: '商学院'
        }
      ],
      menuList1: [
        {
          name: '新手教程',
          icon: '/static/find/find_icon1.png',
          path: '/pages/news_list/news_list'
        },
        {
          name: '平台相关',
          icon: '/static/find/find_icon2.png',
          path: '/pages/news_list/news_list'
        },
        {
          name: '专业解读',
          icon: '/static/find/find_icon3.png',
          path: '/pages/news_list/news_list'
        },
        {
          name: '学习成长',
          icon: '/static/find/find_icon4.png',
          path: '/pages/news_list/news_list'
        },
        {
          name: '行业资讯',
          icon: '/static/find/find_icon5.png',
          path: '/pages/news_list/news_list'
        }
      ],
      // Tabs 列表
      tabsList2: [
        {
          id: '0',
          name: '全部'
        },
        {
          id: '1',
          name: '收入'
        },
        {
          id: '2',
          name: '支出'
        }
      ],
      currentTab: 0,
      list: [

      ]
    }
  },
  onShow() {
    this.getUser()
    this.changeTab(this.tabList[0])
  },

  onPageScroll(e) {
    const top = uni.upx2px(100)
    const { scrollTop } = e
    let percent = scrollTop / top > 1 ? 1 : scrollTop / top
    this.navBg = percent
  },
  onPullDownRefresh() {
    this.getUser().then(() => {
      uni.stopPullDownRefresh()
    })
  },
  methods: {
    ...mapActions(['getUser']),
    changeTab(item) {
      console.log('----')
      this.activeTab = item.id
      API_REQUEST.findSecondCategory(this.activeTab).then(res => {
        this.tabsList2 = res.data.map(item => {
          return {
            id: item.id,
            name: item.name
          }
        })
        this.changeTab2(0)
      })
    },
    // 改变当前的Tabs位置
    changeTab2(index) {
      this.currentTab = index;
      this.list = []
      this.getList()
    },
    getList() {
      let type = this.tabsList2[this.currentTab].id
      API_REQUEST.findListByType(type).then(res => {
        this.list = [
          ...res.data,
          ...res.data,
          ...res.data,
          ...res.data,
          ...res.data,

        ]
      })
    },
  },
  computed: {
    ...mapGetters(['userInfo', 'appConfig']),
    background() {
      const { center_setting } = this.appConfig
      return center_setting.top_bg_image
          ? {
            'background-image': `url(${center_setting.top_bg_image})`
          }
          : {}
    },
    showList1() {
      return this.list
      if (this.activeTab == 2) {
        return this.list
      }
      return this.list.slice(0,1)
    },
    showList2() {
      return []
      if (this.activeTab == 2) {
        return []
      }
      return  this.list.slice(1)
    },
  }
}
</script>
<style lang="scss" scoped>
.find {
  background-image: url(../../static/my/my_bg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  .header-bar {
    padding: 120rpx 24rpx 24rpx;
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient( 106deg, #FE7910 0%, #FE7910 100%);
    .nv-logo {
      position: absolute;
      left: 24rpx;
      top: 70%;
      transform: translateY(-50%);
    }
    .logo-text {
      position: absolute;
      left: 50%;
      top: 70%;
      transform: translate(-50%, -50%);
    }
  }
  .count-box {
    width: auto;
    height: 20px;
    padding: 0 8px;
    position: absolute;
    bottom: 17px;
    left: 17px;
    border-radius: 22px;
    background: rgba(0, 0, 0, .7);
  }
  .list {
    padding: 0 20px;
  }
  .list2 {
    padding: 0 14px;
  }
  .list-item {
    margin-top: 20rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    .list-title {
      padding: 12px;
    }
    .share {
      padding: 12px;
      padding-bottom: 20px;
    }
  }
  .search-box {
    border-radius: 34px;
    color: #222;
    background-color: #fff;
    padding-top: 11px;
    padding-bottom: 11px;
    margin: 0 20px;
  }
  .tab-list {
    background: linear-gradient(90deg, #ff6239 0, #ff5353);
    margin: 20px auto 20px;
    width: fit-content;
    border-radius: 17px;

    padding: 5px;
    .tab-item {
      width: auto;
      height: 28px;
      line-height: 28px;
      padding-left: 14px;
      padding-right: 14px;
      color: #fff;
      text-align: center;
      border-radius: 14px;
      &.active {
        background-color: #fff;
        color: #e63d40;
      }
    }

  }
  .header {
    margin: 0 20rpx;
    .hd-wrap {
      padding-bottom: 20rpx;
      border-radius: 20rpx;
    }

    .user-info {
      padding: 30rpx;

      .avatar {
        height: 110rpx;
        width: 110rpx;
        border-radius: 50%;
        overflow: hidden;
      }

      .name {
        text-align: left;
        margin-bottom: 5rpx;
      }

      .user-id {
        border: $-solid-border;
        border-radius: 100rpx;
        padding: 2rpx 15rpx;
      }

      .user-opt {
        color: #fff;
        position: relative;
        margin-left: 20px;
        text {
          margin-top: 10px;
        }

        .dot {
          position: absolute;
          background-color: #ee0a24;
          border: 2rpx solid #ffffff;
          color: $-color-primary;
          border-radius: 100%;
          top: 6rpx;
          right: 0rpx;
          font-size: 22rpx;
          min-width: 16rpx;
          height: 16rpx;
        }
      }

      .level {
        background: #333;
        padding: 0 15rpx;
        color: #ffdea5;
        line-height: 40rpx;

        .v {
          font-style: italic;
        }
      }
    }

    .user-assets {
      flex: 1;

      .user-assests-item {
        flex: 1;
      }
    }
  }

  .order-nav {
    .icon-contain {
      position: relative;
    }
  }

  .order-nav,
  .my-assets {
    margin: 20rpx 20rpx 0;
    border-radius: 16rpx;
  }

  .server-nav {
    margin: 20rpx;
    border-radius: 16rpx;
  }

  .title {
    height: 88rpx;
    padding: 0 30rpx;
    border-bottom: $-dashed-border;
  }

  .nav {
    padding: 26rpx 0 0;

    .assets-item {
      flex: 1;
    }

    .item {
      width: 25%;
    }

    .badge {
      padding: 0 6rpx;
      min-width: 28rpx;
      height: 28rpx;
      border-radius: 28rpx;
      box-sizing: border-box;
      border: 1rpx solid $-color-primary;
      color: $-color-primary;
      position: absolute;
      left: 33rpx;
      top: -10rpx;
      z-index: 2;
    }

    .nav-icon {
      width: 90rpx;
      height: 90rpx;
    }
  }
}
</style>
